<template>
  <div>
      <el-card class="box-card">
          医品名称: <el-input class="change-button" v-model="name" placeholder="请输入查询名字" clearable />
          医品分类: <el-input class="change-button" v-model="department" placeholder="请输入科室" clearable />
          <el-button type="primary" class="elbutton" @click="find">查询</el-button>
          <!-- 表格 -->
          <div class="list-box">
              <el-table ref="multipleTableRef" :data="dataList.data" style="width: 100%;"
              @select-all="check"
              @select="check"
                  @selection-change="handleSelectionChange">
                  <!-- 多选框 -->
                  <el-table-column type="selection" width="55" >
                  </el-table-column>
                  <el-table-column label="医品名称">
                      <template #default="{ row }">
                          <div v-if="row.active === 0">{{ row.drugsname }}</div>
                          <input v-if="row.active === 1" style="width: 80%" type="text"
                              v-model="changeData.drugsname">
                      </template>
                  </el-table-column>
                  <el-table-column property="sort" label="医品分类">
                      <template #default="{ row }">
                          <div v-if="row.active === 0">{{ row.sort }}</div>
                          <input v-if="row.active === 1" style="width: 80%" type="text" v-model="changeData.sort">
                      </template>
                  </el-table-column>
                  <el-table-column label="医品图片">
                      <template #default="{ row }">
                          <img class="img" :src="row.img" alt="">
                      </template>
                  </el-table-column>
                  <el-table-column label="医品规格">

                      <template #default="{ row }">
                          <div v-if="row.active === 0">{{ row.type }}</div>
                          <input v-if="row.active === 1" style="width: 80%" type="text" v-model="changeData.type">
                      </template>

                  </el-table-column>
                  <el-table-column label="库存数量">

                      <template #default="{ row }">
                          <div v-if="row.active === 0">{{ row.count }}</div>
                          <input v-if="row.active === 1" style="width: 80%" type="text" v-model="changeData.count">
                      </template>
                  </el-table-column>
                  <!-- 医品价格 -->
                  <el-table-column label="医品价格">

                      <template #default="{ row }">
                          <div v-if="row.active === 0">{{ row.price }}</div>
                          <input v-if="row.active === 1" v-model="row.price" style="width: 80%" type="text">
                      </template>
                  </el-table-column>
                  <el-table-column label="生产日期">
                      <template #default="{ row }">
                          <div v-if="row.active === 0">{{ fil(row.starttime) }}</div>
                          <input v-if="row.active === 1" style="width: 80%" type="text"
                              v-model="changeData.starttime">
                      </template>
                  </el-table-column>
                  <el-table-column label="有效日期">

                      <template #default="{ row }">
                          <div v-if="row.active === 0">{{ fil(row.endtime) }}</div>
                          <input v-if="row.active === 1" style="width: 80%" type="text" v-model="changeData.endtime">
                      </template>
                  </el-table-column>
                  <el-table-column property="type" label="操作">
                      <template #default="{ row }">
                          <i class="iconfont icon-del" @click="del(row)"></i>
                          <i class="iconfont icon-change" @click="change(row)" :class="{ red: row.active == 1 }"> </i>
                      </template>

                  </el-table-column>
              </el-table>
          </div>
          <div class="tab">
          <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[1, 50, 100, 200]"
              :small="small" :disabled="disabled" :background="background"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
              <el-button type="danger" @click="allDel">批量删除</el-button>
           </div>
      </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, ref, reactive, watchEffect, nextTick, computed } from 'vue';
import { useStore } from 'vuex';
import { ElTable,ElMessageBox } from 'element-plus'
import dayjs from 'dayjs';
type IchangInfo =
  {
      "id": number
      "drugsname": string
      "sort": string
      "type": string
      "starttime": string
      "endtime": string
      "count": number
      "price": number
      "img": string
      "active": number
      name: string
  }

interface User {
  date: string
  name: string
  address: string
}
//数据
const page = ref(1)
const size = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const store = useStore()
//vuex
//封装发送请求
function option() {
  let data: any = { page: page.value, size: size.value }
  // data[name.value]=name.value
  if (name.value) data.name = name.value
  if (department.value) data.sort = department.value
  stroe.dispatch('jjy/A_warehouseList', data)
}
const stroe = useStore()
onMounted(() => {
  option()
})
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
//数据列表
const dataList = computed(() => {
  return stroe.state.jjy.warehouseList
})
//过滤器
const fil = (data: string) => {
  return dayjs(data).format('YYYY-MM-DD ')
}
// 修改的数据
let changeData: IchangInfo = reactive(
  {
      "id": 1,
      "drugsname": '',
      "sort": '',
      "type": '',
      "starttime": '',
      "endtime": '',
      "count": 1,
      "price": 1,
      "img": '',
      "active": 1,
      "name": ''
  }
)
//修改 
function change(data: any) {
  console.log(data);
 
  changeData = {...data}
  delete changeData.img
  if (data.active == 0) {
      console.log('修改');
      data.active = 1
  } else {
      changeData.name = changeData.drugsname
      store.dispatch('jjy/A_change', changeData)
      ElMessage.success('修改成功')
      data.active = 0
  }
}

//删除
function del(data: any) {
// console.log(row.id);
ElMessageBox.confirm(
  '确认删除吗?此操作不可逆',
  'Warning',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }
)
  .then(async () => {
   store.dispatch('jjy/A_del',data.id)
 option()
 ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}





const name = ref('')
const department = ref('')
//查找
function find() {
  console.log(name, department);
  option()
ElMessage.success('查询成功')
}
//总页数
const total = computed(() => {
  return store.state.jjy.warehouseList.total
})
//每页多少数据
const handleSizeChange = (val: number) => {
  size.value=val
  option()
}
//第几页
const handleCurrentChange = (val: number) => {
  page.value=val
  option()
  // store.dispatch('jjy/A_list',{page:page.value,size:size.value})
}
//全选
let arr=reactive([])
function check(val:any[]){

  
let item=[]
if(val.length>0){
  val.forEach(i=>{
      item.push(i.id)
  })
  arr=item
 
}
}
//全删
function allDel(){
  ElMessageBox.confirm(
  '确认删除吗?此操作不可逆',
  'Warning',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }
)
  .then(async () => {
      store.dispatch('jjy/A_allDel',arr)
  option()
  ElMessage.success('修改成功')
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })

}
</script>

<style scoped lang="scss">
:deep .change-button {
  width: 200px;
  text-indent: 20px;
}

.elbutton {
  margin-left: 50px;
}

.img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.boxconten {
  width: 100%;
  max-width: 600px;
  overflow-y: scroll;
}

.icon-del,
.icon-change {
  color: #408eff;
}

.red {
  color: red;
}

.list-box {
  max-height: 600px;
  overflow-y: scroll;
}
.tab{
  display: flex;
  justify-content: space-between;
}
</style>